<template>
  <div class="box">
    <div class="selectBox1">
      <div class>
        <span style="width:1rem"></span>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="leixingAddModel()"
          v-hasPermi="['basicDataSubsystem:equipment:equipmentInsert']">新增</el-button>
      </div>
      <div>
        <el-form ref="paramform" size="mini" :model="form" inline>
          <el-form-item label>
            <el-input @input="
              paramform.equipment_no = verifyfilter('char', paramform.equipment_no)
            " style="width:150px" @keyup.enter.native="getData" v-model="paramform.equipment_no" placeholder="设备编号"
              clearable @clear="clearCurrentPage"></el-input>
          </el-form-item>

          <el-form-item label>
            <el-input style="width:150px" @input="
              paramform.equipment_type_name = verifyfilter(
                'charemach',
                paramform.equipment_type_name
              )
            " placeholder="设备类型名称" @keyup.enter.native="getData" v-model="paramform.equipment_type_name" clearable
              @clear="clearCurrentPage"></el-input>
          </el-form-item>

          <el-form-item>
            <el-select style="width:150px" clearable ref="selectLabel" v-model="paramform.status" placeholder="请选择">
              <el-option v-for="item in options_status" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData()" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false"
      :loading="loading"></BaseTable>

    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <!-- 新增设备信息 -->
    <el-drawer :before-close="handleClose" title="新增设备信息" :visible.sync="addleixingMod" direction="rtl">
      <el-form ref="addTypeData" size="small" :model="form" style="padding:10px 20px">
        <el-form-item prop="equipment_no" :rules="[{ required: true, message: '设备编号不能为空' }]" label="设备编号"
          :label-width="formLabelWidth">
          <el-input v-model="form.equipment_no"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="equipment_type_name" :rules="[{ required: true, message: '设备类型名称不能为空' }]" label="设备类型名称"
          :label-width="formLabelWidth">
          <el-select ref="selectLabel" style="width: 100%" v-model="form.equipment_type_id" placeholder="请选择"
            @change="changeEquipment()">
            <el-option v-for="item in options_equipment" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门" prop="deptId" :label-width="formLabelWidth"
          :rules="[{ required: true, message: '部门不能为空' }]">
          <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascader"
            @change="casChange2(form.deptId, true)" v-model="form.deptId" filterable style="width:100%"></el-cascader>
        </el-form-item>

        <el-form-item label="客户" prop="customerId" :label-width="formLabelWidth">
          <el-select filterable clearable placeholder="选择客户" ref="selectCustomerName" v-model="form.company_id"
            style="width: 100%">
            <el-option v-for="(item, index) in customerList" :key="item.customerId" :label="item.customerName"
              :value="item.customerId" />
          </el-select>
        </el-form-item>

        <el-form-item prop="equipmentModel" label="设备型号" :label-width="formLabelWidth">
          <el-input v-model="form.equipmentModel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="manufactor" label="生产厂家" :label-width="formLabelWidth">
          <el-input v-model="form.manufactor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="equipment_no" label="出厂日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.productionDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="status" :rules="[{ required: true, message: '状态不能为空' }]" label="状态"
          :label-width="formLabelWidth">
          <el-select ref="selectLabel" v-model="form.status" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in options_status" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="是否外租机械" required :label-width="formLabelWidth">
          <el-switch v-model="form.is_rent" active-value="Y" inactive-value="N" active-text="是"
            inactive-text="否"></el-switch>
        </el-form-item>
      </el-form>

      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="addList()">保 存</el-button>
      </div>
    </el-drawer>


    <!-- 修改设备信息 -->
    <el-drawer :before-close="handleClose" title="修改设备信息" :visible.sync="editleixMod">
      <el-form ref="editTypeData" size="small" :model="nowData" style="padding:10px 20px">
        <el-form-item prop="equipment_no" :rules="[{ required: true, message: '设备编号不能为空' }]" label="设备编号"
          :label-width="formLabelWidth">
          <el-input  v-model="nowData.equipment_no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="equipment_type_name" :rules="[{ required: true, message: '设备类型名称不能为空' }]" label="设备类型名称"
          :label-width="formLabelWidth">
          <el-select ref="selectLabel" v-model="nowData.equipment_type_id" placeholder="请选择"
            @change="changeUpdateEquipment()" style="width: 100%">
            <el-option v-for="item in options_equipment" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId" :label-width="formLabelWidth">
          <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderEdit"
            @change="casChange1(deptId, false)" v-model="deptId" filterable style="width:100%"></el-cascader>
        </el-form-item>

        <el-form-item label="客户" prop="customerId" :label-width="formLabelWidth">
          <el-select filterable clearable placeholder="选择客户" ref="selectCustomerName" v-model="nowData.company_id"
            style="width: 100%">
            <el-option v-for="(item, index) in customerList" :key="item.customerId" :label="item.customerName"
              :value="item.customerId" />
          </el-select>
        </el-form-item>

        <el-form-item prop="equipmentModel" label="设备型号" :label-width="formLabelWidth">
          <el-input v-model="nowData.equipmentModel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="manufactor" label="生产厂家" :label-width="formLabelWidth">
          <el-input v-model="nowData.manufactor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="equipment_no" label="出厂日期" :label-width="formLabelWidth">
          <el-date-picker v-model="nowData.productionDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="status" :rules="[{ required: true, message: '状态不能为空' }]" label="状态"
          :label-width="formLabelWidth">
          <el-select ref="selectLabel" v-model="nowData.status" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in options_status" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否外租机械" required :label-width="formLabelWidth">
          <el-switch v-model="nowData.is_rent" active-value="Y" inactive-value="N" active-text="是"
            inactive-text="否"></el-switch>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="editTypeList()">保 存</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import BaseForm from '@/pages/SystemPage/system/component/form.vue'
import publicapi from '@/api/public/index'
export default {
  name: 'deviceInformation',
  components: {
    BaseForm,
    BaseTable
  },
  data() {
    return {
      oldValA: {},
      oldValB: {},
      oldValC: {},
      oldValD: {},
      options_equipment: [],
      options_company: [],
      companyTree: [],
      customerList: [],
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      options_status: [
        {
          value: '0',
          label: '正常'
        },
        {
          value: '1',
          label: '故障'
        },
        {
          value: '2',
          label: '维修'
        },
        {
          value: '3',
          label: '保养'
        }
      ],
      // 列表数据
      cargotableDataColumns: [
        {
          prop: 'equipment_no',
          label: '设备编号'
        },

        {
          prop: 'equipment_type_name',
          label: '设备类型名称'
        },
        {
          prop: 'unit_name',
          label: '所属单位'
        },
        {
          prop: 'equipmentModel',
          label: '设备型号'
        },
        {
          prop: 'manufactor',
          label: '生产厂家'
        },
        {
          prop: 'productionDate',
          label: '出厂日期'
        },
        {
          prop: 'statusWz',
          label: '状态'
        },
        {
          prop: 'is_rent',
          label: '是否外租机械',
          render: (h, param) => {
            return h('el-tag', {
              props: {
                size: 'mini',
                type:
                  param.row.is_rent == '1'
                    ? 'info'
                    : param.row.is_rent == '0'
                      ? 'success'
                      : 'warning'
              },
              domProps: {
                // 添加标签,使用自己引入的iconfont图标
                innerHTML:
                  param.row.is_rent == 'N'
                    ? '否'
                    : param.row.is_rent == 'Y'
                      ? '是'
                      : '否'
              }
            })
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.$index, params.row)
                    }
                  }
                }),

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('1', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableData: [],

      loading: false,

      iloading: false,
      menuArr: [],
      statusFlag: false,
      paramform: {
        status: '',
        equipment_type_name: '',
        equipment_no: ''
      },
      // 查询字典
      form: {
        is_rent: 'N',
        equipment_type_name: '',
        equipment_type_id: '',
        company_id: '',
        equipment_no: '',
        unit_id: '',
        unit_name: '',
        equipmentModel: '',
        manufactor: '',
        productionDate: '',
        status: '0',
        company: '',
        deptId: []

      }, // 字典类型form
      formList: {
        is_rent: 'N',
        equipment_type_name: '',
        equipment_type_id: '',
        equipment_no: '',
        unit_id: '',
        unit_name: '',
        equipmentModel: '',
        manufactor: '',
        productionDate: '',
        status: ''
      },
      // 字典列表form
      startpage: 1,
      startpage1: 1,
      ids: [], // 批量删除
      formLabelWidth: '120px', // form的item宽度
      editleixMod: false, // 修改弹出字典标签框
      addleixingMod: false, // 新增字典标签框
      exlc: false, // 列表字典框
      addzidian: false, // 新增字典框
      editzidian: false, // 修改字典框
      tableData: [], // 字典类型配置
      tableDataList: [], // 字典配置
      nowData: {}, // 临时存放操作数据

      // 分页
      currentPage: 1,
      totalNum: 1,
      totalNum1: 1, // 总条数
      pagesize: 10,
      pagesize1: 10,
      dicttype: '',
      ref: '',
      deptId: ''
    }
  },

  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    },
    itableHeight() {
      return this.$store.state.tableHeight + 50
    }
  },
  created() {
    this.getEquipmentType()
    this.getcompTree()
    this.getlistCustomer()
  },
  methods: {
    // 获取客户
    getlistCustomer() {
      publicapi.getlistCustomer().then(res => {
        this.customerList = res.data.data
      })
    },
    // 获取公司🌲
    async getcompTree() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/publics/listcomdept`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.companyTree = this.getTreeData(res.data.data.treeNodeList)
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children)
        }
      }
      return data
    },
    casChange1(data, add) {
      this.$nextTick(() => {
        const node = this.$refs['cascaderEdit'].getCheckedNodes()

        const name = node[0].data.deptOrCompany

        if (name == '部门') {
          this.nowData.company = node[0].data.companyId
          this.nowData.unit_id = data[data.length - 1]
        } else {
          this.deptId = ''
          return this.$message.warning('只能选择部门')
        }
      })
    },
    // 根据公司ID获取部门信息
    async getDeptEdit(deptId) {
      this.nowData.unit_id = deptId

      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/sysdept/getdeptbycomp?compId=${this.nowData.unit_id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.deptDataList = res.data.data
    },
    casChange2(data, add) {
      this.$nextTick(() => {
        const node = this.$refs['cascader'].getCheckedNodes()

        const name = node[0].data.deptOrCompany

        if (name == '部门') {
          this.form.company = node[0].data.companyId

          this.form.unit_id = data[data.length - 1]
        } else {
          this.form.deptId = ''
          return this.$message.warning('只能选择部门')
        }
      })
    },
    async editTypeList() {
      this.form.equipment_type_id = this.nowData.equipment_type_id
      this.form.equipment_type_name = this.nowData.equipment_type_name
      this.form.is_rent = this.nowData.is_rent
      this.form.unit_id = this.nowData.unit_id
      this.form.unit_name = this.nowData.unit_name
      this.form.equipment_no = this.nowData.equipment_no
      this.form.status = this.nowData.status
      this.form.id = this.nowData.id
      this.form.company_id = this.nowData.company_id
      this.form.equipmentModel = this.nowData.equipmentModel
      this.form.manufactor = this.nowData.manufactor
      this.form.productionDate = this.nowData.productionDate
      if (this.form.unit_id == '') {
        this.$message.error('请选择公司部门！！')
        return
      }

      // editTypeData
      this.$refs['editTypeData'].validate(async valid => {
        if (valid) {
          const res = await this.$http.put(
            `/${this.$ServiceName}/api/external/mtequipment/update`,
            this.form
          )
          if (res.status == 200) {
            if (res.data.success) {
              if (this.editleixMod) {
                this.editleixMod = false
              }
              this.getData()
              return this.$message.success(res.data.msg)
            }
            return this.$message.warning(res.data.msg)
          }
          this.$message.error('获取数据失败！')
        } else {
          return
        }
      })
    },
    changeEquipment() {
      const value = this.form.equipment_type_id
      let obj = {};
      obj = this.options_equipment.find((item) => {
        return item.value === value;
      });
      console.log(obj.label);
      this.form.equipment_type_name = obj.label
    },
    changeUpdateEquipment() {
      const value = this.nowData.equipment_type_id
      let obj = {};
      obj = this.options_equipment.find((item) => {
        return item.value === value;
      });
      console.log(obj.label);
      this.nowData.equipment_type_name = obj.label
    },
    changeUpdateCompany() {
      const value = this.nowData.unit_id
      let obj = {};
      obj = this.options_company.find((item) => {
        return item.value === value;
      });

      this.nowData.unit_name = obj.label
    },
    handleClose(done) {
      let oldV = {}
      let newV = {}
      if (this.addleixingMod) {
        oldV = this.oldValA
        newV = this.form
      }
      if (this.addzidian) {
        oldV = this.oldValB
        newV = this.formList
      }
      if (this.editleixMod) {
        oldV = this.oldValC
        newV = this.nowData
      }
      if (this.editzidian) {
        oldV = this.oldValD
        newV = this.nowData
      }
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
            const ref = this.ref // editTypeData  editDataRef addTypeData addForm
            this.$nextTick(() => {
              if (ref === 'editTypeData') {
                if (this.$refs['editTypeData'] !== undefined) {
                  this.$refs['editTypeData'].resetFields()
                }
              }
              if (ref === 'editDataRef') {
                if (this.$refs['editDataRef'] !== undefined) {
                  this.$refs['editDataRef'].resetFields()
                }
              }
              if (ref === 'addTypeData') {
                if (this.$refs['addTypeData'] !== undefined) {
                  this.$refs['addTypeData'].resetFields()
                }
              }
              if (ref === 'addForm') {
                if (this.$refs['addForm'] !== undefined) {
                  this.$refs['addForm'].resetFields()
                }
              }
            })
          })
          .catch(_ => { })
      } else {
        done()
        const ref = this.ref // editTypeData  editDataRef addTypeData addForm
        this.$nextTick(() => {
          if (ref === 'editTypeData') {
            if (this.$refs['editTypeData'] !== undefined) {
              this.$refs['editTypeData'].resetFields()
            }
          }
          if (ref === 'editDataRef') {
            if (this.$refs['editDataRef'] !== undefined) {
              this.$refs['editDataRef'].resetFields()
            }
          }
          if (ref === 'addTypeData') {
            if (this.$refs['addTypeData'] !== undefined) {
              this.$refs['addTypeData'].resetFields()
            }
          }
          if (ref === 'addForm') {
            if (this.$refs['addForm'] !== undefined) {
              this.$refs['addForm'].resetFields()
            }
          }
        })
      }
    },

    // 修改弹出
    async handleEdit(index, row) {
      if (row.is_rent == 'N') {
        this.statusFlag = true
      } else {
        this.statusFlag = false
      }
      this.ref = 'editTypeData'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/mtequipment/querybyid?id=${row.id}`
      )
      if (res.data.success) {
        this.nowData = res.data.data
        this.nowData.status = this.nowData.status + ''

        this.deptId = this.nowData.unit_id
        this.getDeptEdit(this.nowData.unit_id)
        this.oldValC = JSON.parse(JSON.stringify(this.nowData))
      } else {
        return false
      }
      if (!this.editleixMod) {
        this.editleixMod = true
      }
    },

    // 新增弹出框
    leixingAddModel() {
      this.form.equipment_type_id = ''
      this.form.equipment_type_name = ''
      this.form.is_rent = 'N'
      this.form.equipment_no = ''
      this.form.unit_id = ''
      this.form.unit_name = ''
      this.form.status = '0'
      this.form.company = ''
      this.form.company_id = ''
      this.form.deptId = []
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
    },
    // 新增设备信息
    addList() {
      if (this.form.unit_id == '') {
        this.$message.error('请选择公司部门！！')
        return
      }
      this.$refs['addTypeData'].validate(async valid => {
        if (valid) {
          const res = await this.$http.post(
            `/${this.$ServiceName}/api/external/mtequipment/insert`,
            this.form
          )
          if (res.status == 200) {
            if (res.data.success) {
              if (this.addleixingMod) {
                this.addleixingMod = false
                this.form.equipment_type_id = ''
                this.form.equipment_type_name = ''
                this.form.unit_name = ''
                this.form.unit_id = ''
                this.form.equipmentModel = ''
                this.form.manufactor = ''
                this.form.productionDate = ''
              }
              this.getData()
              return this.$message.success(res.data.msg)
            }
            return this.$message.warning(res.data.msg)
          }
          this.$message.error('新增失败！')
        } else {
          return false
        }
      })
    },
    // 删除设备信息
    async subDelete(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/mtequipment/deletebyid?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getData()
    },

    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.subDelete(id)
    },

    // 查询数据字典类型 table
    async getData() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }

      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/mtequipment/queryall?startpage=${this.startpage}&pagesize=${this.pagesize}&equipment_no=${this.paramform.equipment_no}&status=${this.paramform.status}&equipment_type_name=${this.paramform.equipment_type_name}`
      )

      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.cargotableData = res.data.data.pages

          // 分页
          this.startpage = res.data.data.pageNum // 当前页
          this.totalNum = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },

    // 查询设备类型
    async getEquipmentType() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/mtequipment/getEquipmentType`
      )

      if (res.status == 200) {
        if (res.data.success) {
          this.options_equipment = res.data.data
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },

    clickSearchSon() {
      this.startpage1 = 1
      this.getListData()
    },

    // 每页显示的条数
    handleSizeChange(val) {
      // console.log(val)
      this.pagesize = val
      this.getData()
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(val)
      this.startpage = val
      this.getData()
    },
    // 每页显示的条数
    handleSizeCha(val) {
      this.pagesize1 = val
      this.getListData()
    },
    // 当前页
    handleCurrentCha(val) {
      this.startpage1 = val
      this.getListData()
    },
    // 清除当前页
    clearCurrentPage() {
      this.startpage = 1
    },

    searchData() {
      this.startpage = 1
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  max-height: none !important;
}

.selectBox {
  justify-content: space-between;
  display: flex;

  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;

  height: 50px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding: 0 1rem;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th>.cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

.right /deep/ .el-button--mini {
  padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button+.el-button {
  margin-left: 3px;
}

.asa {
  display: inline;

  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 6px;
  }
}

.selectBox1 {
  justify-content: space-between;
  display: flex;
  flex-direction: row-reverse;
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;
  line-height: 28px;
  height: 37px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
  line-height: 28px;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}
</style>
